<template>
  <div class="volunteer-layout">
    <el-container>
      <el-aside width="220px">
        <el-menu
          :default-active="$route.path"
          router
          class="volunteer-menu">
          <div class="menu-header">
            <div class="user-avatar">
              <el-avatar :size="64" :src="userAvatar" />
            </div>
            <div class="user-info">
              <h3>{{ $store.state.user.name }}</h3>
              <p>志愿者</p>
            </div>
          </div>
          
          <div class="menu-group">
            <div class="group-title">用户中心</div>
            <el-menu-item index="/volunteer/home">
              <el-icon><HomeFilled /></el-icon>
              <span>我的首页</span>
            </el-menu-item>
            <el-menu-item index="/volunteer/profile">
              <el-icon><UserFilled /></el-icon>
              <span>修改资料</span>
            </el-menu-item>
            <el-menu-item index="/volunteer/certificate">
              <el-icon><Document /></el-icon>
              <span>志愿者证</span>
            </el-menu-item>
            <el-menu-item index="/volunteer/comments">
              <el-icon><ChatDotRound /></el-icon>
              <span>动态评论</span>
            </el-menu-item>
          </div>

          <div class="menu-group">
            <div class="group-title">志愿项目</div>
            <el-menu-item index="/volunteer/projects">
              <el-icon><List /></el-icon>
              <span>我的项目</span>
            </el-menu-item>
            <el-menu-item index="/volunteer/service-hours">
              <el-icon><Timer /></el-icon>
              <span>服务时长</span>
            </el-menu-item>
          </div>

          <div class="menu-group">
            <div class="group-title">志愿队伍</div>
            <el-menu-item index="/volunteer/teams">
              <el-icon><User /></el-icon>
              <span>我的队伍</span>
            </el-menu-item>
          </div>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { 
  HomeFilled, 
  UserFilled, 
  Document, 
  ChatDotRound,
  List,
  Timer,
  User
} from '@element-plus/icons-vue'

const userAvatar = ref('https://placeholder.com/150')
</script>

<style scoped lang="scss">
.volunteer-layout {
  height: 100%;
  background-color: #f5f7fa;
}

.el-aside {
  background-color: #fff;
  border-right: 1px solid #e6e6e6;
  height: calc(100vh - 60px);
}

.volunteer-menu {
  border-right: none;
}

.menu-header {
  padding: 20px;
  text-align: center;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 16px;

  .user-avatar {
    margin-bottom: 12px;
  }

  .user-info {
    h3 {
      margin: 0 0 4px;
      font-size: 16px;
      color: #303133;
    }

    p {
      margin: 0;
      font-size: 13px;
      color: #909399;
    }
  }
}

.menu-group {
  margin-bottom: 16px;

  .group-title {
    padding: 0 20px;
    margin: 8px 0;
    font-size: 12px;
    color: #909399;
    line-height: 24px;
  }
}

:deep(.el-menu-item) {
  height: 48px;
  line-height: 48px;
  
  .el-icon {
    font-size: 18px;
  }

  &:hover {
    background-color: #f0f7ff;
  }

  &.is-active {
    background-color: #e6f2ff;
    color: #409EFF;
    
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 3px;
      background-color: #409EFF;
    }
  }
}

.el-main {
  padding: 24px;
}
</style> 